<template lang="html">
    <div class="filter">
        <div class="filter-top">

            <el-input class="filter-item" placeholder="彩币ID" v-model="listQuery.colorId"></el-input>
            <el-date-picker @change="setEndDate" v-model="listQuery.createTime" type="date" format="yyyy-MM-dd" placeholder="选择日期时间"></el-date-picker>

            <el-select v-model="listQuery.status" placeholder="发行状态">
                <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>


            <!-- <el-select v-model="listQuery.sort" placeholder="排序">
                <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key"></el-option>
            </el-select> -->
            <el-button type="primary" icon="search" @click="search">搜索</el-button>
            <i></i>
            <el-button type="primary" icon="close" @click="clean">清空</el-button>

        </div>

        <div class="filter-cen">
            <el-table :data="tableData" border class="centable" :default-sort = "{prop: 'date', order: 'descending'}" v-loading.body="loading">
                <el-table-column :align="'center'" prop="colorId" label="彩币ID" sortable width="100"></el-table-column>
                <el-table-column :align="'center'" prop="name" label="彩币中文名称"></el-table-column>
                <el-table-column :align="'center'" prop="ename" label="彩币英文全称"></el-table-column>
                <el-table-column :align="'center'" prop="shortName" label="彩币英文简称"></el-table-column>
                <el-table-column :align="'center'" prop="contractUrl" label="官方网站"></el-table-column>
                <el-table-column :align="'center'" prop="totalAmount" label="发行量"></el-table-column>
                <el-table-column :align="'center'" prop="issueTime" label="发行时间" width="180"></el-table-column>
                <el-table-column :align="'center'" label="发行状态" width="120">
                    <template scope="scope">
                        <el-tag>{{scope.row.status | transformStatus}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column :align="'center'" label="操作" width="90">
                    <template scope="scope">
                        <el-button @click.native.prevent="eidt(scope.$index, scope.row)" type="text" size="small">详情</el-button>
                        <el-button v-if="UserAuthLevel === 1 && scope.row.status === 1" @click.native.prevent="del(scope.$index, scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="filter-page">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="listQuery.pageNum"
              :page-size="listQuery.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="pageTotal">
            </el-pagination>
        </div>


        <el-dialog title="详情" :visible.sync="dialogFormVisible">
             <el-form :model="dialogForm">
                <h4 >资产信息</h4>
                <el-form-item label="资产地址：" class="form-ipt" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.assetAddress" disabled></el-input>
                </el-form-item>

                <el-form-item label="审核意见:" v-if="dialogForm.status!==2" :label-width="formLabelWidth">
                     <el-input type="textarea" :maxlength="251" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="dialogForm.remark" :disabled="true">
                     </el-input>
                 </el-form-item>

                <h4 >基本信息</h4>
                <el-form-item label="彩币ID:" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.colorId" disabled></el-input>
                </el-form-item>
                <!-- <el-form-item label="@币:" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.baseCoinType" disabled></el-input>
                </el-form-item> -->
                <el-form-item label="彩币中文名称:" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="彩币英文全称:" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.ename" disabled></el-input>
                </el-form-item>
                <el-form-item label="彩币英文简称:" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.shortName" disabled></el-input>
                </el-form-item>
                <el-form-item label="发行主体:" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.issuingSubject" disabled></el-input>
                </el-form-item>
                <el-form-item label="官方网站:" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.contractUrl" disabled></el-input>
                </el-form-item>
                <el-form-item label="发行量:" :label-width="formLabelWidth">
                    <el-input v-model="dialogForm.totalAmount" disabled></el-input>
                </el-form-item>
                <el-form-item label="彩币LOGO:" :label-width="formLabelWidth">
                    <img class="form-log" :src="dialogForm.logoUrl" alt="">
                </el-form-item>

                <el-form-item label="彩币描述:" :label-width="formLabelWidth">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="dialogForm.description" disabled></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
    name: 'issuing',
    data() {
        let GETTER = this.$store.getters;
        return {
            msg: 'issuing',
            UserAuthLevel: GETTER.G_USER_AUTH_LEVEL,
            loading: true,
            dialogFormVisible: false,
            formLabelWidth: '100px',
            statusOptions: [
                { value: 0, label: '所有状态' },
                // {value: 1,label: '暂存'},
                { value: 2, label: '提交（待审核）' },
                { value: 3, label: '初审未通过' },
                { value: 4, label: '终止' },
                { value: 5, label: '初审通过' },
                { value: 6, label: '待终审' },
                { value: 7, label: '终审未通过' },
                { value: 8, label: '终审通过' },
            ],
            sortOptions: [
                { label: '按ID升序列', key: '+id' },
                { label: '按ID降序', key: '-id' }
            ],
            listQuery: {
                "colorId": "",//彩色币id
                "createTime": "",//创建时间
                "orderBy": "createTime desc",//排序asc desc
                "pageNum": 1,//当前页码（从1开始）
                "pageSize": 10,
                "status": '',//审核状态 1：暂存 2：提交（待审核） 3：初审未通过 4：终止 5：初审通过 6：待终审 7：终审未通过 8：终审通过
            },
            pageTotal: 0,
            tableData: [],
            dialogForm: {
                assetAddress: "",//资产地址
                colorId: "",//彩色币ID
                baseCoinType: "",//@币（基础币）
                name: "",//彩色币名称
                ename: "",//英文名称
                shortName: "",//彩色币简称
                issuingSubject: "",//发行主体
                contractUrl: "",//发行规模
                totalAmount: "",//发行量
                description: "",//描述
                logoUrl: "",//LOGO图片url
            }
        }
    },

    created() {
        this.getList();
    },
    methods: {
        getList() {
            this.loading = true;
            this.$http({
                url: 'issue/api/v1/issue/order/issueOrders',
                method: 'post',
                body: this.listQuery
            }).then((res) => {
                let data = res.data;
                if (data.responseCode === 1) {
                    this.tableData = data.responseData.issueOrderList;
                    this.pageTotal = data.responseData.page.count;
                    this.listQuery.pageSize = data.responseData.page.pageSize;
                }
                this.loading = false;
            })
        },
        search() {
            this.getList();
        },
        clean() {
            this.listQuery.colorId = '';
            this.listQuery.createTime = '';
            this.listQuery.status = '';
            this.getList();
        },
        // 编辑
        eidt(index, rows) {
            console.log(index, rows);
            this.dialogFormVisible = true;
            this.dialogForm = rows;
        },
        // 删除
        del(index, rows) {

            this.$http({
                url: 'issue/api/v1/issue/order/issueOrdewr/' + rows.idSeq,
                method: 'delete'
            }).then((res) => {
                let data = res.data;
                if (data.responseCode === 1) {
                    this.$notify({
                        title: '成功',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    console.log(res);
                    this.$notify({
                        title: '失败',
                        message: data.responseData,
                        type: 'error',
                        duration: 2000
                    });
                }
                this.getList();
            })
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },
        setEndDate(val) {
            this.listQuery.createTime = val;
        }
    }
}
</script>

<style lang="less">
.filter {
    padding: 0 20px;
}

.filter-top {
    padding: 20px 0;
    .filter-item {
        width: 200px;
        display: inline-block;
    }
}

.filter-page {
    padding: 15px 0;
}

.form-log {
    width: 250px;
}
</style>
